<template>
  <div style="position:relative">
    <!-- 头部搜索 -->

      <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="left"
      background="#4bd863"
      left-icon="none"
      right-icon="search"
      show-action
      style="position:fixed;z-index:999;width:100%"
      @focus="toSearch"
    >
      <template v-slot:left>
        <div @click="positionClick" class="location">
          <van-icon name="location" size="1.2rem" color="white" />
          <span style="color: #fff; font-size: 14px">西安</span>
        </div>
      </template>
      <template v-slot:action>
        <van-icon @click="toMessage" name="chat" size="1.8rem" color="white" />
      </template>
    </van-search>

  <div style="padding-top:57px">
        <!-- banner -->
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white" style="">
      <van-swipe-item v-for="img in banners" :key="img">
        <img :src="img" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格布局 -->
    <van-grid clickable>

      <van-grid-item @click="gribItemClick('hotSale')" class="gridItem" icon="hot-o" text="热卖商品" />
      <van-grid-item @click="gribItemClick('newGoods')" class="gridItem" icon="new-o" text="新上商品" />
      <van-grid-item @click="gribItemClick('discount')" class="gridItem" icon="discount" text="特价商品" />
      <van-grid-item @click="gribItemClick('recommend')" class="gridItem" icon="diamond-o" text="推荐商品" />
      <van-grid-item @click="gribItemClick('spring')" class="gridItem" icon="gift-card-o" text="春季水果" />
      <van-grid-item @click="gribItemClick('summer')" class="gridItem" icon="bill-o" text="夏季水果" />
      <van-grid-item @click="gribItemClick('autumn')" class="gridItem" icon="goods-collect-o" text="秋季水果" />
      <van-grid-item @click="gribItemClick('winter')" class="gridItem" icon="coupon-o" text="冬季水果" />
    </van-grid>
    <div class="line"></div>
    <!-- 热卖推荐 -->
    <van-grid gutter="0px" :border="false" class="hotSale" :column-num="3">
      <van-grid-item>
        <van-image width="100" height="100" :src="hots[0]" />
        <span class="hotSale">热门档口 ></span>
      </van-grid-item>
      <van-grid-item>
        <van-image width="100" height="100" :src="hots[0]" />
        <span class="hotSale">最新冲榜 ></span>
      </van-grid-item>
      <van-grid-item>
        <van-image width="100" height="100" :src="hots[0]" />
        <span class="hotSale">天天特价 ></span>
      </van-grid-item>
    </van-grid>
    <!-- 热卖水果 -->
    <div style="margin-top: 10px">
      <div class="hotSaleFruit">
        <span>*热卖水果*</span>
        <div
          style="width: 100%; height: 1px; background: #4bd863; margin-top: 5px"
        ></div>
      </div>
      <fruit-list type="hot"></fruit-list>
      <!-- 查看更多按钮 -->
      <div style="text-align: center">
        <van-button style="width: 40%" color="#4bd863" size="small">
          查看更多
        </van-button>
      </div>
    </div>
    <!-- 新上架水果 -->
    <div style="margin-top: 20px">
      <div class="hotSaleFruit">
        <span>*新上架水果*</span>
        <div
          style="width: 100%; height: 1px; background: #4bd863; margin-top: 5px"
        ></div>
      </div>
      <fruit-list type="news"></fruit-list>
      <!-- 查看更多按钮 -->
      <div style="text-align: center">
        <van-button style="width: 40%" color="#4bd863" size="small">
          查看更多
        </van-button>
      </div>
    </div>
    <!-- 天天特价 -->
    <div style="margin-top: 20px">
      <div class="hotSaleFruit">
        <span>*天天特价*</span>
        <div
          style="width: 100%; height: 1px; background: #4bd863; margin-top: 5px"
        ></div>
      </div>
      <fruit-list type="discount"></fruit-list>
      <!-- 查看更多按钮 -->
      <div style="text-align: center">
        <van-button style="width: 40%" color="#4bd863" size="small">
          查看更多
        </van-button>
      </div>
    </div>
    <main-tab-bar></main-tab-bar>
  </div>
  </div>
</template>

<script>
import TabBar from "../../components/tabbar/TabBar";
import TabBarItem from "../../components/tabbar/TabBarItem";
import mainTabBar from "../../components/mainTabBar";
import fruitList from "@/components/fruitList/fruitList";
export default {
  name: "home",
  data() {
    return {
      value: "",
      banners: [
        require("@/assets/img/banner/banner.jpg"),
        require("@/assets/img/banner/banner2.jpg"),
      ],
      hots: [require("@/assets/img/other/hotIcon.png")],
    };
  },
  methods: {
    // 宫格点击事件
    gribItemClick(type) {
      let url=`/${type}`
      this.$router.push(url);
    },
    // 跳转至搜索页面
    toSearch(){

       this.$router.push("/search");
    },
    //跳转到mesage
    toMessage(){
      this.$router.push("/message");
    },
    positionClick(){
      this.$router.push("/position");

    }
  },
  components: {
    TabBar,
    TabBarItem,
    mainTabBar,
    fruitList,
  },
};
</script>

<style lang="less" scoped>
.location {
  margin-right: 0.625rem;
}
.gridItem {
  color: #4bd863;
}
.line {
  height: 0.1525rem;
  width: 100%;
  background-color: #b0e0e6;
}
.hotItem {
  margin: 0;
  padding: 0;
}
.hotSale {
  font-size: 0.625rem;
  margin-top: 0.3125rem;
  span {
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    width: 100px;
    border: 1px solid rgb(248, 241, 241);
    border-top: none;
    margin-top: 0;
  }
}
.hotSaleFruit {
  text-align: center;
  color: #4bd863;
  font-weight: bold;
}
</style>
